<template>
  <view class="goods_list">
    <ugo-search></ugo-search>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#ea4350"
      bar-width="150"
    ></u-tabs>
    <!-- tabs对应的内容 -->
    <view v-if="current===0">
      <view class="goods-content">
        <navigator
          class="goods-item"
          v-for="item in goods"
          :key="item.goods_id"
          :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        >
          <view class="goods-item-img">
            <u-image
              :src="item.goods_small_logo||src"
              width="191"
              height="191"
            ></u-image>
          </view>
          <view class="goods-item-info">
            <view class="goods_name">{{item.goods_name}}</view>
            <view class="goods_price">￥{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
    </view>
    <view v-if="current===1">
      <!--  销量 -->
      销量销量销量销量
    </view>
    <view v-if="current===2">
      <!--  价格 -->
      价格价格价格价格
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      // 商品列表
      goods: [],
      // 默认图片地址
      src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FTX9669_01.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648372748&t=bdad7fa9a3908defe372556a009ae987",
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },

    // 获取商品列表数据
    async getGoodsList() {
      const res = await this.$u.http.get("/goods/search", this.params);
      // console.log(res);
      // 获取要渲染的数据  数组合并
      this.goods = [...this.goods, ...res.goods];
      // 获取数据总条数
      this.total = res.total;
    },
  },
  onLoad(options) {
    const { cid } = options;
    // 定义 接口要的参数
    this.params = {
      // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: cid,
      // 否	number	页码
      pagenum: 1,
      // 否	number	页容量  默认值 20
      pagesize: 20,
    };

    // 发送请求获取数据
    this.getGoodsList();
  },
  // 滚动条触底
  onReachBottom() {
    // console.log("滚动条触碰到底部了");
    // 判断还有没有下一页数据
    if (this.goods.length >= this.total) {
      // 没有下一页数据
      uni.showToast({
        title: "没有下一页数据啦",
        icon: "none",
      });
      return;
    }
    console.log("还有下一页的数据");

    // 页码+1
    this.params.pagenum++;
    // 发送请求获取数据 数组合并
    this.getGoodsList();
  },

  // 页面下拉刷新
  async onPullDownRefresh() {
    // console.log("页面下拉刷新");

    // 充值页面的数据
    this.goods = [];
    // 重置页码
    this.params.pagenum = 1;
    // 发送请求
    await this.getGoodsList();

    // 必须等到数据回来 才关闭 关闭页面的下拉属性
    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss">
.goods-content {
  .goods-item {
    display: flex;
    margin-bottom: 10rpx;
    border-bottom: 1rpx solid #ccc;
    .goods-item-img {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .goods-item-info {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
      }
      .goods_price {
        color: $theme-color;
      }
    }
  }
}
</style>